<template>
    <div style="display: flex;justify-content: space-between;">
        <!-- 左边 -->
        <div class="left" style="width: 1100px;margin-top: 10px;">
            <!-- 客户资料 -->
            <div style="box-shadow: 5px 5px 20px rgba(0,0,0,0.1);padding: 20px 0px 20px 20px;">
            <el-form :model="followRuleForm" ref="followRuleFormRef" label-width="auto">
                <h2>客户资料/{{ followRuleForm.name }}</h2>
                <hr>
                <el-row style="margin-top: 20px;">
                    <el-col :span="8">
                        <h3>客户姓名</h3>
                        <el-form-item style="width: 320px;">
                            <el-input v-model="followRuleForm.name" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <h3>手机号码</h3>
                        <el-form-item style="width: 320px;">
                            <el-input v-model="followRuleForm.phone" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <h3>职业</h3>
                        <el-form-item style="width: 320px;">
                            <el-select
                                v-model="followRuleForm.occupation"
                                placeholder="请选择"
                                clearable
                            >
                                <el-option v-for="item in occuOption" :key="item.value" :label="item.dictLabel"
                                :value="item.dictLabel" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                    <el-col :span="8">
                        <h3>学历</h3>
                        <el-form-item style="width: 320px;">
                            <el-select
                                v-model="followRuleForm.education"
                                placeholder="请选择"
                                clearable
                            >
                                <el-option v-for="item in eduOption" :key="item.value" :label="item.dictLabel"
                                :value="item.dictLabel" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <h3>所在地区</h3>
                        <el-form-item style="width: 320px;">
                            <!-- <el-select
                                v-model="followRuleForm.address"
                                placeholder="请选择"
                                clearable
                            >
                                <el-option label="Zone one" value="shanghai" />
                                <el-option label="Zone two" value="beijing" />
                            </el-select> -->
                            <el-cascader
                                size="large"
                                :options="options"
                                v-model="address"
                                @change="handleChange">
                                </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <h3>微信号码</h3>
                        <el-form-item style="width: 320px;">
                            <el-input v-model="followRuleForm.weixin" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                    <el-col :span="8">
                        <h3>年龄</h3>
                        <el-form-item style="width: 320px;">
                            <el-input-number v-model="followRuleForm.age" :min="1" :max="100" label="描述文字" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <h3>QQ</h3>
                        <el-form-item style="width: 320px;">
                            <el-input v-model="followRuleForm.qq" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <h3>性别</h3>
                        <el-form-item style="width: 320px;">
                            <el-select
                                v-model="followRuleForm.gender"
                                placeholder="请选择"
                                clearable
                            >
                                <el-option v-for="item in sexOption" :key="item.value" :label="item.dictLabel"
                                :value="item.dictValue" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                    <el-col :span="8">
                        <h3>身高</h3>
                        <el-form-item style="width: 320px;">
                            <el-input-number v-model="followRuleForm.height" :min="1" :max="100" label="描述文字" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <h3>体重</h3>
                        <el-form-item style="width: 320px;">
                            <el-input-number v-model="followRuleForm.weight" :min="1" :max="100" label="描述文字" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <h3>备注</h3>
                        <el-form-item style="width: 320px;">
                            <el-input v-model="followRuleForm.remark" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            </div>
            <!-- 客户意向 -->
            <div style="box-shadow: 5px 5px 20px rgba(0,0,0,0.1);padding: 20px 0px 20px 20px;margin-top: 30px;">
        <el-form :model="followRuleForm" ref="followRuleFormRef" label-width="auto">
            <h2>客户意向</h2>
            <hr>
            <el-row style="margin-top: 20px;">
                <el-col :span="8">
                    <h3>意向类型</h3>
                    <el-form-item style="width: 320px;">
                        <el-select
                            v-model="followRuleForm.type"
                            placeholder="课程分类"
                            clearable
                        >
                            <el-option v-for="item in typeOption" :key="item.value" :label="item.dictLabel"
                            :value="item.dictValue" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <h3>意向课程</h3>
                    <el-form-item style="width: 320px;">
                        <el-select
                            v-model="followRuleForm.courseId"
                            placeholder="请选择"
                            clearable
                        >
                            <el-option v-for="item in courseOption" :key="item.value" :label="item.name"
                            :value="item.type" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <h3>健身原因</h3>
                    <el-form-item style="width: 320px;">
                        <el-input v-model="followRuleForm.reason" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="margin-top: 10px;">
                <el-col :span="8">
                    <h3>每周健身时间</h3>
                    <el-form-item style="width: 320px;">
                        <el-input-number v-model="followRuleForm.hours" :min="1" :max="100" label="描述文字" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <h3>意向金额</h3>
                    <el-form-item style="width: 320px;">
                        <el-input-number v-model="followRuleForm.money" :min="1" :max="100" label="描述文字" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <h3>其他意向</h3>
                    <el-form-item style="width: 320px;">
                        <el-input v-model="followRuleForm.othenIntention" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
            </div>
            <!-- 沟通记录 -->
            <div style="box-shadow: 5px 5px 20px rgba(0,0,0,0.1);padding: 20px 0px 20px 20px;margin-top: 30px;">
        <el-form :model="followRuleForm" ref="followRuleFormRef" label-width="auto">
            <h2>沟通记录</h2>
            <hr>
            <el-row style="margin-top: 20px;">
                <el-col :span="8">
                    <h3>跟进状态</h3>
                    <el-form-item style="width: 320px;">
                        <el-select
                            v-model="followRuleForm.status"
                            clearable
                        >
                            <el-option v-for="item in statusOption" :key="item.value" :label="item.dictLabel"
                            :value="item.dictValue" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <h3>下次跟进时间</h3>
                    <el-form-item style="width: 320px;">
                        <el-date-picker
                        v-model="followRuleForm.nextTime"
                        type="datetime"
                    />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <h3>沟通要点</h3>
                    <el-form-item style="width: 320px;">
                        <el-select
                            v-model="followRuleForm.record1"
                            placeholder="请选择"
                            clearable
                        >
                            <el-option v-for="item in focusOption" :key="item.value" :label="item.dictLabel"
                            :value="item.dictLabel" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <h3>沟通纪要</h3>
                    <el-form-item style="width: 1040px;margin-top: 10px;">
                        <el-input v-model="followRuleForm.record2" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item style="width: 1040px;margin-top: 10px;margin-left: 780px;">
                <el-button plain @click="back">返回</el-button>
                <el-button type="primary" @click="save">保存</el-button>
                <el-button type="success">转为成交用户</el-button>
            </el-form-item>
        </el-form>
            </div>
        </div>
        <!-- 右边 -->
        <div class="right" style="margin-top: 10px;width: 365px;box-shadow: 5px 5px 20px rgba(0,0,0,0.3);">
            <div style="padding: 20px;">
            <el-form :model="pageParams" label-width="auto">
                <h2>商机跟进记录</h2>
                <hr>
            </el-form>
            </div>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { followData, occupationData, educationData, sexData, typeData, courseData, statusData, focusData, saveFollow } from "../../../../api/list"
import type {  FormInstance  } from 'element-plus'
import router from '@/router';
import { useRoute } from 'vue-router';
// 级联选择器
import { regionData ,codeToText } from 'element-china-area-data'


// 级联选择器
const options = ref(regionData)  //数据
//选中的数据
const address = ref([]) 
//当选中值变化时触发的事件
const handleChange=(value:any) =>{
    console.log(value) //区域码
     if (
        address.value[0] != null &&
        address.value[1] != null &&
        address.value[2] != null
    ) {
        const str =
            codeToText[address.value[0]] +
            '/' +
            codeToText[address.value[1]] +
            '/' +
            codeToText[address.value[2]]
        // console.log(str)  //中文
    }
    followRuleForm.value.province = codeToText[address.value[0]]
    followRuleForm.value.city = codeToText[address.value[1]]
    followRuleForm.value.area = codeToText[address.value[2]]
    followRuleForm.value.address[0] = address.value[0]
    followRuleForm.value.address[1] = address.value[1]
    followRuleForm.value.address[2] = address.value[2]  
}

// 返回按钮
function back(){
    router.push({ path: '/business' });
}

// id
let id = ref(0)
const pageParams = ref({
    pageNum: 1,
    pageSize: 10,
    name: '',
    phone: '',
    owner: '',
    region: ''
})

// 接收路由跳转传递过来的参数
const route = useRoute();

// 跟进表单数据
interface FollowRuleForm {
    name: string,
    gender: null,
    phone: string,
    qq: string,
    weixin: string,
    age: number,
    activityId: number,
    businessId: null,
    channelId: null,
    createTime: string,
    nextTime: string,
    status: null,
    area: string,
    city: string,
    clueId: null,
    courseId: null,
    createBy: string,
    delFlag: number,
    education: string,
    endTime: null,
    failCount: number,
    height: null,
    hours: null,
    money: null,
    occupation: null,
    othenIntention: null,
    province: string,
    reason: null,
    remark: null,
    transfer: false,
    updateBy: null,
    updateTime: null,
    weight: null,
    address: [3],
    record1: string,
    record2: string,
    type: null
}

const followRuleFormRef = ref < FormInstance > ()
const followRuleForm = ref < FollowRuleForm > ({
    name: '',
    gender: null,
    phone: '',
    qq: '',
    weixin: '',
    age: 0,
    activityId: 1,
    businessId: null,
    channelId: null,
    createTime: '',
    nextTime: '',
    area: '',
    city: '',
    clueId: null,
    courseId: null,
    createBy: '',
    delFlag: 0,
    education: '',
    endTime: null,
    failCount: 0,
    height: null,
    hours: null,
    money: null,
    occupation: null,
    othenIntention: null,
    province: '',
    reason: null,
    remark: null,
    status: null,
    transfer: false,
    updateBy: null,
    updateTime: null,
    weight: null,
    address: [3],
    record1: '',
    record2: '',
    type: null
})

// 职业列表
const occuOption = ref()
// 学历列表
const eduOption = ref()
// 性别列表
const sexOption = ref()
// 意向类型
const typeOption = ref()
// 意向课程
const courseOption = ref()
// 跟进状态
const statusOption = ref()
// 沟通重点
const focusOption = ref()

// 保存
function save(){
    saveFollow(followRuleForm.value).then(res => {
        console.log(res)
    })
    
}


// onMounted(() => {
//     const { query } = route;
//     if (query.businessId) {
//         id.value = Number(query.businessId);
//         getList();
//     }
//     // 将传递过来的数据赋值给表单
//     Object.assign(followRuleForm, query);
// });

onMounted(() => {
    const { query } = route;
    if (query.businessId) {
        id.value = Number(query.businessId);
        getList();
    }
    // 将传递过来的数据赋值给表单
    Object.assign(followRuleForm.value, query);
    if (query.createBy) {
        followRuleForm.value.createBy = query.createBy as string;
    }
    if (query.createTime) {
        followRuleForm.value.createTime = query.createTime as string;
    }
});

// 列表数据
function getList() {
    // 数据
    followData(id.value).then(res => {
        followRuleForm.value.name = res.data.name
        followRuleForm.value.phone = res.data.phone
        followRuleForm.value.weixin = res.data.weixin
        followRuleForm.value.age = res.data.age
        followRuleForm.value.qq = res.data.qq
        followRuleForm.value.gender = res.data.gender
        followRuleForm.value.status = res.data.status
        followRuleForm.value.nextTime = res.data.nextTime
    })
    // 职业
    occupationData().then(res => {
        occuOption.value = res.data
    })
    // 学历
    educationData().then(res => {
        eduOption.value = res.data
    })
    // 性别
    sexData().then(res => {
        sexOption.value = res.data
    })
    // 意向类型
    typeData().then(res => {
        typeOption.value = res.data
    })
    // 意向课程
    courseData().then(res => {
        courseOption.value = res.data
    })
    // 跟进状态
    statusData().then(res => {
        statusOption.value = res.data
    })
    // 沟通重点
    focusData().then(res => {
        focusOption.value = res.data
    })
}

</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 100px;
}

:deep(.el-form-item__label){
    font-size: 16px;
    font-weight: 600;
}
h2{
    margin-bottom: 5px;
}
h3{
    font-weight: 600;
    font-style: italic;
}
:deep(.el-input__wrapper){
    width: 320px;
}
:deep(.el-row){
    // min-width: 900px;
}
:deep(.el-input-number){
    width: 320px;
}
</style>
  